/*@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');*/
@import url(theme.css);

.wrapper {
  display: flex;
  /*width: 100%;*/
  align-items: stretch;
}

.wrapper > * {
  flex: 1 100%;
}

.table > thead > tr > th {
  border-bottom: 0px;
}

.table > tbody > tr > td {
  border-top: 0px;
}

a {
  color: var(--primary);
}
a:hover {
  color: var(--orange);
  text-decoration: underline;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

#sidebarCollapse {
  display: none;
}

#sidebar a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}

#sidebar {
  min-width: 200px;
  max-width: 200px;
  background: var(--gray-dark);
  color: #fff;
  transition: all 0.3s;
  /*z-index: 999;*/
}

#sidebar.active {
  margin-left: -200px;
}

#sidebar ul li a {
  text-align: left;
}

#sidebar .sidebar-header {
  padding: 20px;
  background: var(--gray-dark);
}

#sidebar .sidebar-header strong {
  display: none;
  font-size: 1.8em;
}

#sidebar ul.components {
  padding: 10px 0;
  /*border-bottom: 1px solid #2A6EBB;*/
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
}

#sidebar ul li a:hover {
  color: var(--primary);
  background: var(--gray);
}
#sidebar ul li a i {
  margin-right: 10px;
}

#sidebar ul li.active > a,
a[aria-expanded="true"] {
  color: #fff;
  background: var(--gray-dark);
}

#sidebar a[data-toggle="collapse"] {
  position: relative;
}

#sidebar a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
  /*content: '\e259';*/
  display: block;
  position: absolute;
  right: 20px;
  font-size: 0.6em;
}

/*#sidebar a[aria-expanded="true"]::before {*/
/*    content: '\e260';*/
/*}*/

#sidebar ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: var(--gray-dark);
}

#sidebar img#RoguewarLogo {
  max-width: 95%;
  max-height: 95%;
}

img#FactionLogo {
  max-width: 75%;
  max-height: 75%;
}

#content {
  padding: 20px;
  min-height: 100vh;
  transition: all 0.3s;
}

.content_edit {
  float: right;
}

#content table,
tr {
  width: 100%;
  /*border: 1px  solid black;*/
  vertical-align: top;
}

#content td {
  margin-left: 0px;
}

#content tr:nth-child(even) {
  background-color: var(--gray-dark);
}

.panel-default {
  margin-left: 15px;
  margin-right: 15px;
}

.panel-default > .panel-heading-contentlist {
  background: #82afe3;
  border-color: #d5e4f6;
}

.panel-body-contentlist {
  background: #c1d7f1;
}

.navbar-default {
  background-color: #2a6ebb;
  border-color: #1a5eab;
}

.navbar .navbar-brand {
  color: #ffffff;
}

.navbar .navbar-text {
  color: #ffffff;
}

#showHide a#showHide[aria-expanded="false"]::before,
a#showHide[aria-expanded="true"]::before {
  content: none;
  color: black;
  background-color: #82afe3;
  border-color: #82afe3;
}

#showHide a#showHide[aria-expanded="true"]::before {
  content: none;
  color: black;
  background-color: #82afe3;
  border-color: #82afe3;
}

#showHide ul li.active > a#showHide,
a#showHide[aria-expanded="true"] {
  color: black;
  background: #82afe3;
}

a#showHide {
  color: black;
  display: inline-block;
  height: 95%;
  width: 95%;
  text-decoration: none;
}

#showHide i#showHide {
  color: black;
  background-color: #82afe3;
  border-color: #82afe3;
}

.flex-container {
  display: flex;
  flex-direction: row;
  padding: 5px;
}

.flex-container > div {
  margin: 5px;
}

b.highlight {
  color: var(--indigo);
}

i.highlight {
  color: var(--indigo);
}

.tab {
  margin-left: 2%;
}

/* ---------------------------------------------------
    PAGNINATION LIST STYLE
----------------------------------------------------- */

.pagination {
  margin-top: 8px;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  #sidebar {
    margin-left: -200px;
  }
  #sidebar.active {
    margin-left: 0;
  }
  #sidebarCollapse {
    display: block;
  }

  img#FactionLogo {
    max-width: 50%;
    max-height: 50%;
  }

  img#FactionLogoFull {
    max-width: 65%;
    max-height: 65%;
  }
}

/* ─── Warmap Page Only ───────────────────────────── */

body.warmap-page,
body.warmap-page html {
  height: 100vh; /* fallback */
  height: 100svh; /* small viewport height */
  height: 100dvh; /* dynamic viewport height */
  margin: 0;
  overflow: hidden; /* No scrollbars */
}

body.warmap-page .wrapper {
  display: flex;
  height: 100%;
  overflow: hidden;
}

body.warmap-page #content.warmap-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

@supports (padding: env(safe-area-inset-top)) {
  body.warmap-page #content.warmap-container {
    padding-top: 0 !important;
    box-sizing: border-box;
  }

  body.warmap-page .konvajs-content {
    margin-top: 0 !important;
  }
}

body.warmap-page #react-root {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

#sidebarCollapse,
.menu-mini {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0;
  z-index: 10001;
}